<script lang="ts">
export default {
  name: "xt-tabs",
};
</script>

<script setup lang="ts">
import { ElTabs, ElTabPane } from "element-plus";
import Typings from "../../../../typings";
import { computed, ref } from "vue";
interface Props {
  options: Typings.Common.option[];
  alias?: Typings.Common.alias;
}

const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  alias: () => ({ code: "code", name: "name" }),
});

const instanceRef = ref<InstanceType<typeof ElTabs>>();
const getInstance = computed(() => instanceRef.value);
defineExpose({
  instance: getInstance,
});
</script>

<template>
  <el-tabs ref="instanceRef" class="xt-tabs">
    <el-tab-pane
      v-for="{
        [props.alias['name']]: name,
        [props.alias['code']]: code,
        ...op
      } in options"
      :key="op[alias['code']]"
      :label="name"
      :name="code"
      v-bind="op"
    ></el-tab-pane>
  </el-tabs>
</template>

<style lang="scss">
@use "../../../scss/xt-tabs.scss";
</style>
